<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('record列表')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <script th:src="@{/js/echarts.js}"></script>
    <th:block th:include="include :: ztree-css"/>
    <style>
        .contain {
            margin-top: 30px;
            display: flex;
            justify-content: space-around;
            background: #FFFFFF;
            height: 600px;
        }

        .conta {
            height: 600px;
            width: 710px;
            background: #FFFFFF;
            border-radius: 6px;
            box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
        }

        .custom {
            background: #FFFFFF;
            margin-top: 80px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="ui-layout-west">
    <div class="box box-main">
        <div class="box-header">
            <div class="box-title">
                <i class="fa icon-grid"></i> 组织机构
            </div>
            <div class="box-tools pull-right">
                <a type="button" class="btn btn-box-tool" href="#" onclick="dept()" title="管理部门"><i
                        class="fa fa-edit"></i></a>
                <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i
                        class="fa fa-chevron-up"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i
                        class="fa fa-chevron-down"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i
                        class="fa fa-refresh"></i></button>
            </div>
        </div>
        <div class="ui-layout-content">
            <div id="tree" class="ztree"></div>
        </div>
    </div>
</div>

<div class="ui-layout-center custom">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <input type="hidden" id="deptId" name="deptId">

                    <div class="select-list">
                        <ul>
                            <li class="select-time">
                                <label>通过时间：</label>
                                <input type="text" class="time-input" id="startTime" placeholder="开始时间"
                                       name="params[beginDayTime]"/>
                                <span>-</span>
                                <input type="text" class="time-input" id="endTime" placeholder="结束时间"
                                       name="params[endDayTime]"/>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="query()"><i
                                        class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                        class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>

            <div class="tabs-container custom">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 按日统计</a>
                    </li>
                    <!--<li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">按月统计</a>-->
                    <!--</li>-->
                </ul>

                <div class="tab-content" style="background: #5acde2">
                    <div id="tab-1" class="tab-pane active">
                        <div class="col-sm-12 contain">
                            <div class="conta" id="contain"></div>
                            <div class="conta" id="contain2"></div>
                        </div>
                    </div>
                    <div id="tab-2" class="tab-pane">
                        <div class="col-sm-12 contain">
                            <div class="conta" id="contain11"></div>
                            <div class="conta" id="contain22"></div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<script th:inline="javascript">
    var prefix = "statistics";

    $(function () {
        var panehHidden = false;
        if ($(this).width() < 869) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 185});
        // 回到顶部绑定
        if ($.fn.toTop !== undefined) {
            var opt = {
                win: $('.ui-layout-center'),
                doc: $('.ui-layout-center')
            };
            $('#scroll-up').toTop(opt);
        }
        queryDeptTree();
        query();
    });

    function queryDeptTree() {
        var url = ctx + prefix + "/treeData";
        var options = {
            url: url,
            expandLevel: 2,
            onClick: zOnClick
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            $("#deptId").val(treeNode.name);
            $("#parentId").val(treeNode.pId);
            $.table.search();

        }
    }

    $('#btnExpand').click(function () {
        $._tree.expandAll(true);
        $(this).hide();
        $('#btnCollapse').show();
    });

    $('#btnCollapse').click(function () {
        $._tree.expandAll(false);
        $(this).hide();
        $('#btnExpand').show();
    });

    $('#btnRefresh').click(function () {
        queryDeptTree();
    });

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('contain'));
    var myChart2 = echarts.init(document.getElementById('contain2'));

    function query() {

        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
        var json = {
            "startTime": startTime,
            "endTime": endTime,
        }
        $.ajax({
            type: "post",
            async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: prefix + "/queryDayData", //请求发送到Controller处，路径我上面写好了的，直接拼的，你自己按照你的写
            data: JSON.stringify(json),
            contentType: 'application/json',
            dataType: "json", //返回数据形式为json
            success: function (result) {
                if (result && result.flag == 'admin') {
                    var dateArr = [];
                    var seriesArr = [];
                    var valueArr = [];  // 饼图容器

                    for (var i = 0; i < result.dateList.length; i++) {
                        dateArr.push(result.dateList[i]); //挨个取出类别并填入类别数组
                    }
                    for (var i = 0; i < result.dataList.length; i++) {
                        var json =
                            {
                                name: result.nameList[i],
                                type: 'line',
                                stack: 'Total',
                                data: result.dataList[i],
                                smooth: true
                            }
                        seriesArr.push(json)
                    }
                    for (var i = 0; i < result.ringMaps.length; i++) {
                        var programName = result.ringMaps[i].programName;
                        var num = result.ringMaps[i].num;
                        var json = {
                            value: num,
                            name: programName
                        }
                        valueArr.push(json)
                    }

                    myChart.hideLoading(); //隐藏加载动画
                    myChart.clear();
                    myChart.setOption({
                        title: {
                            text: '项目每日打卡次数'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['清流河三期', '苏滁产业园']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: dateArr
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: seriesArr
                    });


                    myChart2.clear();
                    myChart2.setOption({
                        roseType: 'radius',
                        title: {
                            text: '项目打卡次数占比',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '项目名称',
                                type: 'pie',
                                radius: '50%',

                                data: valueArr,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    })
                }

                // 请求成功时执行该函数内容，result即为服务器返回的json对象
                else if (result && result.flag == 'user') {
                    var dateArr = [];
                    var numArr = [];
                    var valueArr = [];

                    for (var i = 0; i < result.dateList.length; i++) {
                        dateArr.push(result.dateList[i]); //挨个取出类别并填入类别数组
                    }
                    for (var i = 0; i < result.numList.length; i++) {
                        numArr.push(result.numList[i]); //挨个取出销量并填入销量数组
                    }

                    for (var i = 0; i < result.ringMaps.length; i++) {
                        var supplierName = result.ringMaps[i].supplierName;
                        var num = result.ringMaps[i].num;
                        var json = {
                            value: num,
                            name: supplierName
                        }
                        valueArr.push(json)
                    }
                    myChart.hideLoading(); //隐藏加载动画
                    myChart.clear();
                    myChart.setOption({
                        title: {
                            text: '项目每日打卡次数'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['清流河三期', '苏滁产业园']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: dateArr
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            type: 'line',
                            stack: 'Total',
                            data: numArr,
                            smooth: true
                        }]
                    });

                    myChart2.clear();
                    myChart2.setOption({
                        roseType: 'radius',
                        title: {
                            text: '供应商打卡次数占比',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '供应商名称',
                                type: 'pie',
                                radius: '50%',

                                data: valueArr,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    })
                }
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        })
    };


    // myChart2.setOption({
    //     roseType: 'radius',
    //     title: {
    //         text: 'Referer of a Website',
    //         subtext: 'Fake Data',
    //         left: 'center'
    //     },
    //     tooltip: {
    //         trigger: 'item'
    //     },
    //     legend: {
    //         orient: 'vertical',
    //         left: 'left'
    //     },
    //     series: [
    //         {
    //             name: 'Access From',
    //             type: 'pie',
    //             radius: '50%',
    //             data: [
    //                 {value: 1048, name: 'Search Engine'},
    //                 {value: 735, name: 'Direct'},
    //                 {value: 580, name: 'Email'},
    //                 {value: 484, name: 'Union Ads'},
    //                 {value: 300, name: 'Video Ads'}
    //             ],
    //             emphasis: {
    //                 itemStyle: {
    //                     shadowBlur: 10,
    //                     shadowOffsetX: 0,
    //                     shadowColor: 'rgba(0, 0, 0, 0.5)'
    //                 }
    //             }
    //         }
    //     ]
    // });


</script>
</body>
</html>